<template>
  <div>
    <el-card style="min-height: 200px;">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in shelveVOS" :key="item.shelveName" :label="item.shelveName" :name="item.shelveName">
          <table>
            <thead>
              <tr>
                <th>
                  <div class="out">
                    <b>列</b>
                    <em>层</em>
                  </div>
                </th>
                <th v-for="(rowth,index1) in item.shelveWidthVOS" :key="index1" class="column-th">{{item.shelveWidthVOS.length-index1}}</th>
              </tr>
            </thead>
            <tbody class="layui-tab">
              <tr v-for="(columnth,index2) in item.shelveWidthVOS[index].stockVOS" :key="index2">
                <th class="layer-th">{{item.shelveWidthVOS[index].stockVOS.length-index2}}</th>
                <td v-for="(columntd,index3) in item.shelveWidthVOS" :key="index3" :class="[columntd.stockVOS[index2].freezeStatus=='冻结'?'outdNo':columntd.stockVOS[index2].stockStatus=='空闲'?'itemtd': columntd.stockVOS[index2].stockStatus=='入库中'? 'support': 'used']">
                  <el-popover placement="top-start" title="物料详情" width="200" trigger="click">
                    <el-card class="box-card">
                      <div class="text item">
                        {{'物料名称: ' }}{{columntd.stockVOS[index2].productName?columntd.stockVOS[index2].productName:'' }}
                      </div>
                      <div class="text item">
                        {{'物料编号: '}}{{columntd.stockVOS[index2].productCode?columntd.stockVOS[index2].productCode:'' }}
                      </div>
                      <div class="text item">
                        {{'物料数量: '}}{{columntd.stockVOS[index2].unitCount?columntd.stockVOS[index2].unitCount:'' }}
                      </div>
                      <div class="text item">
                        {{'当前状态: ' }}{{columntd.stockVOS[index2].stockStatus }}
                      </div>
                      <el-button type="primary" style="width: 100%;" @click="changeFreezeStatus(columntd.stockVOS[index2].stockId,columntd.stockVOS[index2].freezeStatus)">{{columntd.stockVOS[index2].freezeStatus=='冻结'?'解除冻结':'冻结'}}</el-button>
                    </el-card>
                    <!-- {{columntd.stockVOS[index2].stockId}} -->
                    <div type="text" slot="reference" style="min-width: 35px; min-height: 40px;"></div>
                  </el-popover>
                </td>
              </tr>
            </tbody>
          </table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'Stock',
    data() {
      return {
        activeName: '0',
        itemtd: 'itemtd',
        used: 'used',
        support: 'support',
        outd: 'outd',
        outdNo: 'outdNo',
        notnull: 'notnull',
        visible: false,
        shelveVOS: [],
        tableReqForm: {
          pageNum: 1,
          pageSize: 10
        },
        changeFreezeForm: {
          stockId: '',
          freezeStatus: ''
        }
      }
    },
    methods: {
      handleClick(tab, event) {
        this.activeName = tab.label
      },
      async getShelveList() {
        const res = await this.$apiUtil.postByJson('shelve/getShelveList', this.tableReqForm)
        console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.shelveVOS = res.data.shelveVOS
        for (let i = 3; i < this.shelveVOS.length; i++) {
          this.getStock(this.shelveVOS[0])
        }
        if (this.activeName === '0') {
          this.activeName = res.data.shelveVOS[0].shelveName
        }
      },
      async getStock(shelveVOS) {
        for (let j = 0; j < shelveVOS.shelveWidthVOS.length; j++) {
          shelveVOS.shelveWidthVOS[j].stockVOS.reverse()
        }
      },
      async changeFreezeStatus(stockId, freezeStatus) {
        this.changeFreezeForm.stockId = stockId
        if (freezeStatus === '冻结') {
          this.changeFreezeForm.freezeStatus = '正常'
        } else {
          this.changeFreezeForm.freezeStatus = '冻结'
        }
        const res = await this.$apiUtil.postByJson('shelve/changeFreezeStatus', this.changeFreezeForm)
        // console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.getShelveList()
      }
    },
    created() {
      this.getShelveList()
    }
  }
</script>

<style lang="less" scoped>
  .out {
    border-top: 50px #c0c0c085 solid;
    border-left: 50px #80808069 solid;
    position: relative;
    color: #000000;

    b {
      font-style: normal;
      display: block;
      position: absolute;
      top: -46px;
      left: -21px;
      width: 50px;
    }

    em {
      font-style: normal;
      display: block;
      position: absolute;
      top: -22px;
      left: -43px;
      width: 50px;
    }
  }

  table th {
    width: 65px;
    height: 40px;
  }

  td {
    cursor: pointer;
  }

  .column-th {
    background: #c0c0c085;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    text-align: center;
    padding: 5px 2px;
    border-color: white;
  }

  .layer-th {
    background: #80808069;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    text-align: center;
    border-color: white;
  }

  .used {
    background: #FFFF00;
  }

  .outd {
    background: #6d85fb;
  }

  .support {
    background: #02A7F0;
  }

  .outdNo {
    background: #777888;
  }

  .itemtd {
    background: #80ff80;
    height: 25px;
    padding: 2px;
  }

  .notnull {
    background: #FF7575;
  }

  .layui-tab {
    td {
      border: 1px solid navy;
      height: 35px;
      border-color: white;
    }
  }

  .text {
    font-size: 16px;
  }

  .el-card__body {
    padding: 5px;
    width: 100% !important;
  }
</style>
